import React from "react";
import InputComponent from "./Input";
import { useErrmsgStyles } from "./styles";

interface NumberProps {
  start?: number;
  end?: number;
  errmsg?: string;
  disabled?: boolean;
  type: "number";
  onChange: (v: [number?, number?]) => void;
}

interface StringProps {
  start?: string;
  end?: string;
  errmsg?: string;
  disabled?: boolean;
  type: "string";
  onChange: (v: [string?, string?]) => void;
}

export default function DoubleInputComponent({
  start,
  end,
  errmsg,
  disabled,
  type,
  onChange,
}: NumberProps | StringProps) {
  const handler = (a?: number | string, b?: number | string) => {
    if (type == "number")
      onChange([Number(a) || undefined, Number(b) || undefined]);
    else onChange([a as string, b as string]);
  };

  const classes = useErrmsgStyles();

  return (
    <>
      <div style={{ display: "flex" }}>
        <InputComponent
          type={type}
          value={start || ""}
          onChange={(v) => handler(v || undefined, end)}
          disabled={disabled}
        />
        ~
        <InputComponent
          type={type}
          value={end || ""}
          onChange={(v) => handler(start, v || undefined)}
          disabled={disabled}
        />
      </div>
      {errmsg && <div className={classes.errmsg}>{errmsg}</div>}
    </>
  );
}
